<%-- 
    Document   : search_form
    Created on : Apr 7, 2013, 9:48:39 PM
    Author     : TNT
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="common.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
              
.form-wrapper {
   width: 240px;
   padding: 3px;
   margin: 5px;
   margin-left: 20px;
   overflow: hidden;
   border-width: 1px;
   border-style: solid;
   border-color: #dedede #bababa #aaa #bababa;
   
   border-radius: 10px;     
   background-color: #f6f6f6;     
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));     
   background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);      
   background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);      
   background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);     
   background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);      
   background-image: linear-gradient(top, #f6f6f6, #eae8e8);}             

.form-wrapper #search {
   width: 165px;
   height: 12px;
   padding: 5px 1px;
   float: left;
   font: 9px 'sans-serif', 'trebuchet MS', 'Tahoma';      
   border: 1px solid #ccc;      
   -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
   -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
   box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
   -moz-border-radius: 3px;     
   -webkit-border-radius: 3px;      
   border-radius: 3px;}        

.form-wrapper #search:focus {
   outline: 0;
   border-color: #aaa;
   -moz-box-shadow: 0 1px 1px #bbb inset;
   -webkit-box-shadow: 0 1px 1px #bbb inset;
   box-shadow: 0 1px 1px #bbb inset;}

.form-wrapper #search::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;}

.form-wrapper #search:-moz-placeholder {
   color: #999;
   font-weight: normal;} 

.form-wrapper #search:-ms-input-placeholder {
   color: #999; 
   font-weight: normal;} 

.form-wrapper #submit {
   float: right;
   border: 1px solid #00748f;
   margin-top: 2px;
   height: 20px;
   width: 70px; 
   padding: 0;
   cursor: pointer;
   font: bold 7px Arial, Helvetica;
   color: #fafafa;
   text-transform: uppercase;
   background-color: #0483a0;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
   background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);      
   background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
   background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
   background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
   background-image: linear-gradient(top, #31b2c3, #0483a0);
   -moz-border-radius: 3px;      
   -webkit-border-radius: 3px;
   border-radius: 3px;
   text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;} 

.form-wrapper #submit:hover, .form-wrapper #submit:focus {
   background-color: #31b2c3;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
   background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);      
   background-image: -moz-linear-gradient(top, #0483a0, #31b2c3); 
   background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
   background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
   background-image: linear-gradient(top, #0483a0, #31b2c3);}

.form-wrapper #submit:active {
   outline: 0;      
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;}

.form-wrapper #submit::-moz-focus-inner {
   border: 0;

}
        </style>
    </head>
    <body>
        
        <form class="form-wrapper" action ="result1.jsp" method ="GET" onsubmit="checkinput()">
   <input id="search" type="text" name ="keyword"/> 
   <input id="submit" type="submit" value="Tìm kiếm" /> 
        </form>
    </body>
</html>
